<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="description" content="overview & stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
		<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="/static/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/static/css/ace.min.css" />
		<link rel="stylesheet" href="/static/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="/static/css/ace-skins.min.css" />
		<script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>

<script type="text/javascript">
	$(top.hangge());	
	
	//新增
	function addmenu(){
		 top.jzts();
		 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="新增菜单";
		 diag.URL = '/menu/toAdd';
		 diag.Width = 263;
		 diag.Height = 274;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	//修改
	function editmenu(menuId){
		 top.jzts();
	   	 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="编辑菜单";
		 diag.URL = '/menu/toEdit?menuId='+menuId;
		 diag.Width = 223;
		 diag.Height = 256;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	//编辑顶部菜单图标
	function editTb(menuId){
		 top.jzts();
	   	 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="编辑图标";
		 diag.URL = '/menu/toEditicon?menuId='+menuId;
		 diag.Width = 530;
		 diag.Height = 150;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	function delmenu(menuId,isParent){
		var flag = false;
		if(isParent){
			if(confirm("确定要删除该菜单吗？其下子菜单将一并删除！")){
				flag = true;
			}
		}else{
			if(confirm("确定要删除该菜单吗？")){
				flag = true;
			}
		}
		if(flag){
			top.jzts();
			var url = "/menu/del?menuId="+menuId+"&guid="+new Date().getTime();
			$.get(url,function(data){
				top.jzts();
				document.location.reload();
			});
		}
	}
	
	function openClose(menuIds,curObj,trIndex){
		var txt = $(curObj).text();
		if(txt=="展开"){
			$(curObj).text("折叠");
			$("#tr"+menuIds).after("<tr id='tempTr"+menuIds+"'><td colspan='5'>数据载入中</td></tr>");
			if(trIndex%2==0){
				$("#tempTr"+menuIds).addClass("main_table_even");
			}
			var url = "/menu/sub?menuId="+menuIds+"&guid="+new Date().getTime();
			$.get(url,function(data){
				if(data.length>0){
					var html = "";
					$.each(data,function(i){
						html = "<tr style='height:24px;line-height:24px;' name='subTr"+menuIds+"'>";
						html += "<td></td>";
						html += "<td><span style='width:80px;display:inline-block;'></span>";
						if(i==data.length-1)
							html += "<img src='/static/images/joinbottom.gif' style='vertical-align: middle;'/>";
						else
							html += "<img src='/static/images/join.gif' style='vertical-align: middle;'/>";
						html += "<span style='width:100px;text-align:left;display:inline-block;'>"+this.menuName+"</span>";
						html += "</td>";
						html += "<td>"+this.menuUrl+"</td>";
						html += "<td class='center'>"+this.menuOrder+"</td>";
						html += "<td><a class='btn btn-mini btn-info' title='编辑' onclick='editmenu(\""+this.menuId+"\")'><i class='icon-edit'></i></a> <a class='btn btn-mini btn-danger' title='删除' onclick='delmenu(\""+this.menuId+"\",false)'><i class='icon-trash'></i></a></td>";
						html += "</tr>";
						$("#tempTr"+menuIds).before(html);
					});
					$("#tempTr"+menuIds).remove();
					if(trIndex%2==0){
						$("tr[name='subTr"+menuIds+"']").addClass("main_table_even");
					}
				}else{
					$("#tempTr"+menuIds+" > td").html("没有相关数据");
				}
			},"json");
		}else{
			$("#tempTr"+menuIds).remove();
			$("tr[name='subTr"+menuIds+"']").remove();
			$(curObj).text("展开");
		}
	}
</script>
</head>

<body>
	<table id="table_report" class="table table-striped table-bordered table-hover">
		<thead>
		<tr>
			<th class="center"  style="width: 50px;">序号</th>
			<th class='center'>名称</th>
			<th class='center'>资源路径</th>
			<th class='center'>排序</th>
			<th class='center'>操作</th>
		</tr>
		</thead>
		<tr th:each="menu : ${menuList}" th:if="${menu}!=null" th:id="'tr'+${menu.menuId}">
			<td>[[${menuStat.index+1}]]</td>
			<td class="center"><i th:attr="class=${menu.menuIcon }">&nbsp;</i>[[${menu.menuName}]]
				<span class="label label-success arrowed" th:if="${menu.menuType}==1">系统</span>
				<span class="label label-important arrowed-in" th:if="${menu.menuType}!=1">业务</span>
			</td>
			<td th:if="${menu.menuUrl}=='#'">&nbsp;</td>
			<td th:if="${menu.menuUrl}!='#'">[[${menu.menuUrl}]]</td>
			<td class='center'>[[${menu.menuOrder}]]</td>
			<td style="width: 25%;">
			<a class='btn btn-mini btn-warning' th:attr="onclick='openClose('+${menu.menuId}+',this,'+${menuStat.index }+')'" >展开</a>
			<a class='btn btn-mini btn-purple' title="图标" th:attr="onclick='editTb('+${menu.menuId }+')'" ><i class='icon-picture'></i></a>
			<a class='btn btn-mini btn-info' title="编辑" th:attr="onclick='editmenu('+${menu.menuId }+')'" ><i class='icon-edit'></i></a>
			<a class='btn btn-mini btn-danger' title="删除"  th:attr="onclick='delmenu('+${menu.menuId }+',true)'"><i class='icon-trash'></i></a>
		</tr>
		<tr th:if="${menuList}==null">
			<td colspan="100">没有相关数据</td>
		</tr>
	</table>
	
	<div class="page_and_btn">
		<div>
			&nbsp;&nbsp;<a class="btn btn-small btn-success" onclick="addmenu();">新增</a>
		</div>
	</div>
	
</body>
</html>